<template>
  <div class="com-circle">
    <div v-if="title" class="title">{{ title }}</div>
    <div
      class="circle"
      :style="{
        width: radius + 'px',
        height: radius + 'px',
        'border-radius': radius/2 + 'px',
        background: `linear-gradient(135deg, ${colors[0]}, ${colors[1]})`,
        'font-size': fs + 'px'
      }"
    >{{ score || 0 }}</div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: null
    },
    fs: {
      type: [Number, String],
      default: 48
    },
    radius: {
      type: [Number, String],
      default: 100
    },
    score: {
      type: [Number, String],
      required: true
    },
    colors: {
      type: Array,
      default() {
        return [("#FCF7F8", "#E13B5A")];
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.title {
  color: #2aaef2;
  font-size: 30px;
  margin-bottom: 16px;
}
.circle {
  color: #fff;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
